<template>
	<div class="guide-wrapper" @click="next">
        <img class="guide-main-img" :src="imgs[$route.params.step]" alt="">
        <img class="step-next" :src="stepNext" alt="">
	</div>
</template>	

<script>
// import stepNext from '@/images/guide-next.png';
// import stepStart from '@/images/guide-start.png';
export default {
  data () {
    return {
      imgs: [0, '/static/img/guide-step1.png', '/static/img/guide-step2.png', '/static/img/guide-step3.png'],
      stepNext: '/static/img/guide-next.png'
      // stepStart
    }
  },

  methods: {
    next () {
      const step = +this.$route.params.step
      if (step === this.imgs.length - 1) {
        this.$router.push('/home')
      } else {
        this.$router.push(`/guide/${step + 1}`)
      }
    }
  }
}
</script>

<style lang="less">
.guide-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    .guide-main-img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .step-next {
        position: absolute;
        bottom: 100px;
        right: 100px;
    }
}
</style>
